@{
    ViewData["Title"] = "设备维护计划";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>设备维护计划</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <style>
        .layui-form-item .layui-input-inline {
            width: 180px;
        }
        .layui-table-tool-temp {
            padding-right: 120px;
        }
        .layui-btn-container {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    @Html.AntiForgeryToken()
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header">设备维护计划</div>
            <div class="layui-card-body">
                <!-- 搜索栏 -->
                <form class="layui-form" lay-filter="searchForm">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">计划编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="planCode" placeholder="请输入计划编码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">计划名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="planName" placeholder="请输入计划名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">计划类型</label>
                            <div class="layui-input-inline">
                                <select name="planType">
                                    <option value="">请选择类型</option>
                                    <option value="设备点检计划">设备点检计划</option>
                                    <option value="设备保养计划">设备保养计划</option>
                                    <option value="设备维修计划">设备维修计划</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-inline">
                                <select name="status">
                                    <option value="">请选择状态</option>
                                    <option value="草稿">草稿</option>
                                    <option value="已确认">已确认</option>
                                    <option value="审批中">审批中</option>
                                    <option value="已审批">已审批</option>
                                    <option value="已完成">已完成</option>
                                    <option value="已拒绝">已拒绝</option>
                                    <option value="已生成生产工单">已生成生产工单</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn" lay-submit lay-filter="searchBtn">查询</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

                <!-- 表格工具栏 -->
                <div class="layui-btn-container">
                    <button type="button" class="layui-btn layui-btn-sm" id="addBtn">
                        <i class="layui-icon">&#xe654;</i> 新增
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" id="batchDeleteBtn">
                        <i class="layui-icon">&#xe640;</i> 删除
                    </button>
                    <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" id="exportBtn">
                        <i class="layui-icon">&#xe67d;</i> 导出
                    </button>
                </div>

                <!-- 数据表格 -->
                <table id="maintenancePlanTable" lay-filter="maintenancePlanTable"></table>

                <!-- 状态列模板 -->
                <script type="text/html" id="statusTpl">
                    {{# if(d.status == "草稿") { }}
                        <span class="layui-badge layui-bg-gray">草稿</span>
                    {{# } else if(d.status == "已确认") { }}
                        <span class="layui-badge layui-bg-blue">已确认</span>
                    {{# } else if(d.status == "审批中") { }}
                        <span class="layui-badge layui-bg-orange">审批中</span>
                    {{# } else if(d.status == "已审批") { }}
                        <span class="layui-badge layui-bg-green">已审批</span>
                    {{# } else if(d.status == "已完成") { }}
                        <span class="layui-badge layui-bg-cyan">已完成</span>
                    {{# } else if(d.status == "已拒绝") { }}
                        <span class="layui-badge layui-bg-red">已拒绝</span>
                    {{# } else if(d.status == "已生成生产工单") { }}
                        <span class="layui-badge">已生成生产工单</span>
                    {{# } else { }}
                        <span class="layui-badge layui-bg-gray">{{d.status || '未知'}}</span>
                    {{# } }}
                </script>

                <!-- 操作列模板 -->
                <script type="text/html" id="operationTpl">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
                </script>
            </div>
        </div>
    </div>

    <script src="~/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;

            // 初始化表格
            var tableIns = table.render({
                elem: '#maintenancePlanTable',
                url: '/Equipment/GetMaintenancePlanList',
                method: 'POST',
                page: true,
                limits: [10, 20, 50, 100],
                limit: 10,
                cols: [[
                    { type: 'checkbox' },
                    { field: 'planCode', title: '计划编码', width: 150 },
                    { field: 'planName', title: '计划名称', width: 200 },
                    { field: 'planType', title: '计划类型', width: 150 },
                    { field: 'frequency', title: '频率', width: 100 },
                    { field: 'frequencyUnit', title: '频率单位', width: 100 },
                    { field: 'createdAt', title: '创建时间', width: 120, templet: function(d) {
                        if (!d.createdAt) return '';
                        var date = new Date(d.createdAt);
                        if (isNaN(date.getTime())) return '';
                        return date.getFullYear() + '-' + 
                               String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                               String(date.getDate()).padStart(2, '0');
                    }},
                    { field: 'updatedAt', title: '更新时间', width: 120, templet: function(d) {
                        if (!d.updatedAt) return '';
                        var date = new Date(d.updatedAt);
                        if (isNaN(date.getTime())) return '';
                        return date.getFullYear() + '-' + 
                               String(date.getMonth() + 1).padStart(2, '0') + '-' + 
                               String(date.getDate()).padStart(2, '0');
                    }},
                    { field: 'status', title: '状态', width: 120, toolbar: '#statusTpl' },
                    { field: 'remark', title: '备注', minWidth: 150 },
                    { title: '操作', width: 150, toolbar: '#operationTpl', fixed: 'right' }
                ]],
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                response: {
                    statusName: 'code',
                    statusCode: 0,
                    msgName: 'msg',
                    countName: 'count',
                    dataName: 'data'
                },
                parseData: function (res) {
                    console.log('原始响应数据:', res); // 调试信息
                    
                    // 确保返回正确的数据格式
                    if (res && typeof res === 'object') {
                        return {
                            "code": res.code || 0,
                            "msg": res.msg || 'success',
                            "count": res.count || 0,
                            "data": res.data || []
                        };
                    } else {
                        console.error('响应数据格式错误:', res);
                        return {
                            "code": 1,
                            "msg": "响应数据格式错误",
                            "count": 0,
                            "data": []
                        };
                    }
                },
                done: function(res, curr, count) {
                    console.log('表格渲染完成 - 总数:', count, '当前页:', curr, '响应:', res);
                },
                error: function(res, msg) {
                    console.error('表格请求失败:', res, msg);
                    layer.msg('数据加载失败: ' + (msg || '未知错误'));
                }
            });

            // 监听搜索按钮
            form.on('submit(searchBtn)', function (data) {
                var formData = data.field;
                
                // 处理分页参数
                formData.SkipCount = 0;
                formData.MaxResultCount = 10;
                
                tableIns.reload({
                    where: formData,
                    page: { curr: 1 }
                });
                return false;
            });

            // 监听表格工具条
            table.on('tool(maintenancePlanTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'edit') {
                    // 编辑 - 跳转到编辑页面
                    window.location.href = '/Equipment/AddEdit?id=' + data.id;
                } else if (obj.event === 'delete') {
                    // 删除
                    layer.confirm('确定删除该计划吗？', function (index) {
                        $.ajax({
                            url: '/Equipment/DeleteMaintenancePlan',
                            type: 'POST',
                            data: { id: data.id },
                            success: function (res) {
                                if (res.success) {
                                    layer.msg('删除成功');
                                    tableIns.reload();
                                } else {
                                    layer.msg('删除失败: ' + res.message);
                                }
                            },
                            error: function (xhr) {
                                layer.msg('服务器错误: ' + xhr.statusText);
                            }
                        });
                        layer.close(index);
                    });
                }
            });

            // 新增按钮点击事件
            $('#addBtn').on('click', function () {
                window.location.href = '/Equipment/AddEdit';
            });

            // 批量删除按钮点击事件
            $('#batchDeleteBtn').on('click', function () {
                var checkStatus = table.checkStatus('maintenancePlanTable');
                var data = checkStatus.data;
                if (data.length === 0) {
                    layer.msg('请选择要删除的记录');
                    return;
                }

                layer.confirm('确定批量删除选中的 ' + data.length + ' 条记录吗？', function (index) {
                    var ids = data.map(function (item) {
                        return item.id;
                    });

                    $.ajax({
                        url: '/Equipment/BatchDeleteMaintenancePlan',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify(ids),
                        success: function (res) {
                            if (res.success) {
                                layer.msg('批量删除成功');
                                tableIns.reload();
                            } else {
                                layer.msg('批量删除失败: ' + res.message);
                            }
                        },
                        error: function (xhr) {
                            layer.msg('服务器错误: ' + xhr.statusText);
                        }
                    });
                    layer.close(index);
                });
            });

            // 导出按钮点击事件
            $('#exportBtn').on('click', function () {
                layer.msg('导出功能开发中...', { icon: 7 });
            });
        });
    </script>
</body>
</html> 